import React, { FC } from 'react';
import classNames from 'classnames/bind';

import styles from './index.less';

const cx = classNames.bind(styles);

interface InjectProps {
  /** 卡片模块标题 */
  cardTitle: string;
  /** 是否展示高亮图标 */
  showHighLightIcon?: boolean;
  /** 卡片模块最外层DIV样式 */
  containerStyle?: React.CSSProperties;
  /** 卡片模块最外层DIV类名 */
  containerClassName?: string;
}

const ModuleCard = <T extends {}>(WrappedComponent: FC<T>): FC<T & InjectProps> => {
  return (props: T & InjectProps) => {
    const { cardTitle, showHighLightIcon, containerStyle, containerClassName } = props;

    const moduleCls = cx(styles.moduleCard, containerClassName);

    const titleCls = cx(styles.moduleTitle, {
      highlight: showHighLightIcon,
    });

    return (
      <div className={moduleCls} style={containerStyle}>
        {cardTitle ? <div className={titleCls}>{cardTitle}</div> : null}
        <WrappedComponent {...props} />
      </div>
    );
  };
};

export default ModuleCard;
